import { addNum, isEmpty } from 'shiptools'
import { _toString } from '../../utils/index'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: true
    },
    name: {
      type: String,
      value: ''
    },
    title: {
      type: String,
      value: ''
    },
    /**
     * 输入框类型
     * @type {'number' | 'digit'}
     * @description 必填，type='digit' 时，h5 无法显示数字输入框，若需要数字输入框建议使用 number (v1.5.1 支持)
     */
    type: {
      type: String,
      value: 'number' | 'digit'
    },
    /**
     * 输入框当前值
     * @type {number | string}
     * @description 必填，输入框当前值，开发者需要通过 onChange 事件来更新 value 值
     */
    value: {
      type: Number | String,
      value: 0 | '',
      observer: function (newVal, oldVal) { 
        if(newVal !== oldVal && !isEmpty(newVal)) {
          const inputValue = this.handleValue(newVal)
          this.setData({inputValue})
        } 
        
      }
    },

    style: {
      type: String,
      value: ''
    },
    /**
     * 最小值
     * @type {number}
     * @default 0
     */
    min: {
      type: Number,
      value: 0
    },
    /**
     * 最大值
     * @type {number}
     * @default 100
     */
    max: {
      type: Number,
      value: 0
    },
    /**
     * 每次点击改变的间隔大小
     * @type {number}
     * @default 1
     */
    step: {
      type: Number,
      value: 0
    },
    /**
     * 组件的大小
     * @default 'normal'
     */
    size: {
      type: String,
      value: 'normal' | 'large'
    },
    /**
     * input 宽度
     * @type {number}
     * @description 不包括两侧按钮，单位根据环境转为 rpx 或 rem
     * @default 120
     */
    width: {
      type: Number,
      value: 0
    },
    /**
     * 是否禁止输入，禁止点击按钮
     * @type {boolean}
     * @default false
     */
    disabled: {
      type: Boolean,
      value: false
    },

    editable: {
      type: Boolean,
      value: false
    },
    /**
     * 是否禁止输入，但不禁止点击按钮
     * @type {boolean}
     * @default false
     */
    disabledInput: {
      type: Boolean,
      value: false
    },

    clear: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    inputValue: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {

    
    handleValue: function(value) {
      const { max, min } = this.data
      let resultValue = value === '' ? min : value
      // 此处不能使用 Math.max，会是字符串变数字，并丢失 .
      if (resultValue > max) {
      resultValue = max
      this.handleError({
          type: 'OVER',
          errorValue: resultValue,
      })
      }
      if (resultValue < min) {
      resultValue = min
      this.handleError({
          type: 'LOW',
          errorValue: resultValue,
      })
      }
      resultValue = this.parseValue(resultValue)
      return resultValue
    },

    // 格式化数字，处理01变成1,并且不处理1. 这种情况
    parseValue: function (num) {
      if (num === '') return '0'

      const numStr = _toString(num)
      if (numStr.indexOf('0') === 0
          && numStr.indexOf('.') === -1) {
          // 处理01变成1,并且不处理1.
          return _toString(parseFloat(num))
      }
      return _toString(num)
    },

    handleClick: function(e) {
      const clickType = e.currentTarget.dataset.type
      const { disabled, value, min, max, step } = this.data
      const lowThanMin = (clickType === 'minus' && value <= min)
      const overThanMax = (clickType === 'plus' && value >= max)
      if (lowThanMin || overThanMax || disabled) {
        const deltaValue = clickType === 'minus' ? -step : step
        const errorValue = addNum(value, deltaValue)
        if (disabled) {
          this.handleError({
            type: 'DISABLED',
            errorValue,
          })
        } else {
          this.handleError({
            type: lowThanMin ? 'LOW' : 'OVER',
            errorValue,
          })
        }
        return
      }
      const deltaValue = clickType === 'minus' ? -step : step
      let newValue = addNum(value, deltaValue)
      newValue = this.handleValue(newValue)

      this.triggerEvent('change', newValue)
    },
    handleInput: function(e) {},
    handleBlur: function(e) {},
    clearValue: function(e) {},
    onErrorClick: function(e) {},

    onClick: function(e) {},
    handleError: function(errorValue) {
      this.triggerEvent('errorClick', errorValue)
    }
  },

  
})
